<div class="options">
  <a
    mat-raised-button
    href="https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/items"
    target="_blank"
    class="source-code-button"
  >
    <mat-icon>open_in_new</mat-icon>
    Source
  </a>
  <markdown [src]="'assets/items.md'"></markdown>
</div>
<div class="options-header">
  <mat-form-field>
    <mat-label>X</mat-label>
    <input matInput [(ngModel)]="itemConfig.x" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Y</mat-label>
    <input matInput [(ngModel)]="itemConfig.y" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Rows</mat-label>
    <input matInput [(ngModel)]="itemConfig.rows" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Cols</mat-label>
    <input matInput [(ngModel)]="itemConfig.cols" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Item Cols</mat-label>
    <input matInput [(ngModel)]="itemConfig.maxItemCols" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Item Cols</mat-label>
    <input matInput [(ngModel)]="itemConfig.minItemCols" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Item Rows</mat-label>
    <input matInput [(ngModel)]="itemConfig.maxItemRows" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Item Rows</mat-label>
    <input matInput [(ngModel)]="itemConfig.minItemRows" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Item Aspect Ratio</mat-label>
    <mat-select aria-label="Item Aspect Ratio" [(ngModel)]="itemConfig.itemAspectRatio" (ngModelChange)="changedAspectRatio()">
      <mat-option [value]="null">None</mat-option>
      <mat-option [value]="1 / 1">1/1</mat-option>
      <mat-option [value]="4 / 3">4/3</mat-option>
      <mat-option [value]="16 / 9">16/9</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Max Item Area</mat-label>
    <input matInput [(ngModel)]="itemConfig.maxItemArea" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Min Item Area</mat-label>
    <input matInput [(ngModel)]="itemConfig.minItemArea" type="number" (ngModelChange)="changedItemConfig()" />
  </mat-form-field>
  <mat-checkbox [(ngModel)]="itemConfig.dragEnabled" (ngModelChange)="changedItemConfig()"> Drag </mat-checkbox>
  <mat-checkbox [(ngModel)]="itemConfig.resizeEnabled" (ngModelChange)="changedItemConfig()"> Resize </mat-checkbox>
  <mat-checkbox [(ngModel)]="itemConfig.compactEnabled" (ngModelChange)="changedItemConfig()"> Compact </mat-checkbox>
  @if (itemConfig.resizableHandles) {
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.s" (ngModelChange)="changedItemConfig()"> Resize South </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.e" (ngModelChange)="changedItemConfig()"> Resize East </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.n" (ngModelChange)="changedItemConfig()"> Resize North </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.w" (ngModelChange)="changedItemConfig()"> Resize West </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.se" (ngModelChange)="changedItemConfig()"> Resize South-East </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.ne" (ngModelChange)="changedItemConfig()"> Resize North-East </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.sw" (ngModelChange)="changedItemConfig()"> Resize South-West </mat-checkbox>
    <mat-checkbox [(ngModel)]="itemConfig.resizableHandles.nw" (ngModelChange)="changedItemConfig()"> Resize North-West </mat-checkbox>
  }
  <mat-form-field>
    <mat-label>Compact Type</mat-label>
    <mat-select aria-label="Compact type" [(ngModel)]="options.compactType" (ngModelChange)="changeGridConfig()">
      <mat-option value="none">None</mat-option>
      <mat-option value="compactUp">Compact Up</mat-option>
      <mat-option value="compactLeft">Compact Left</mat-option>
      <mat-option value="compactLeft&Up">Compact Left & Up</mat-option>
      <mat-option value="compactUp&Left">Compact Up & Left</mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-mini-fab (click)="addItem()" class="add-button cols-2">
    <mat-icon>add</mat-icon>
  </button>
</div>

<gridster [options]="options">
  @for (item of dashboard; track item.id) {
    <gridster-item [item]="item">
      <div class="button-holder">
        <span>{{ item.cols }} / {{ item.rows }}</span>
        <button mat-mini-fab (mousedown)="removeItem($event, item)" (touchstart)="removeItem($event, item)">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </gridster-item>
  }
</gridster>
